<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/css/default.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}" />

    <style type="text/css">
        .table th{font-weight:bold}
        .table th,.table td{padding:8px;line-height:20px}
        .table td{text-align:left}
        .table-border{border-top:1px solid #ddd}
        .table-border th,.table-border td{border-bottom:1px solid #ddd}
        .table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
        .table-bordered th,.table-bordered td{border-left:1px solid #ddd}
        .table-border.table-bordered{border-bottom:0}
        .table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
    </style>

    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src='@{/easyui/js/validateExtends.js}'> </script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(function() {
            //修改密码窗口
            $("#passwordDialog").dialog({
                title: "修改密码",
                width: 500,
                height: 300,
                iconCls: "icon-add",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                buttons: [
                    {
                        text:'提交',
                        iconCls:'icon-user_add',
                        handler:function(){
                            var validate = $("#editPassword").form("validate");
                            if(!validate){
                                $.messager.alert("消息提醒","请检查你输入的数据!","warning");
                                return;
                            } else{
                                $.ajax({
                                    type: "post",
                                    url: [[@{/system/editPassword}]],
                                    data: $("#editPassword").serialize(),
                                    success: function(data){
                                        if(data.success){
                                            $.messager.alert("消息提醒",data.message,"info")
                                            setTimeout(function(){
                                                top.location.href = [[@{/system/logout}]];
                                            }, 1000);
                                        }else{
                                            $.messager.alert("消息提醒",data.message,"error")
                                        }
                                    }
                                });
                            }
                        }
                    },
                    {
                        text:'重置',
                        iconCls:'icon-reload',
                        handler:function(){
                            //清空表单
                            $("#old_password").textbox('setValue', "");
                            $("#new_password").textbox('setValue', "");
                            $("#re_password").textbox('setValue', "");
                        }
                    }
                ],
            })

            //设置编辑学生窗口
            $("#editDialog").dialog({
                title: "修改密码",
                width: 500,
                height: 400,
                fit: true,
                modal: false,
                noheader: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: false,
                toolbar: [
                    {
                        text:'修改密码',
                        plain: true,
                        iconCls:'icon-password',
                        handler:function(){
                            $("#passwordDialog").dialog("open");
                        }
                    }
                ],

            });

            setTimeout(function(){
                $("#passwordDialog").dialog("open");
            },1000);


        })
        /*]]>*/
    </script>
</head>
<body>

<div id="editDialog" style="padding: 20px;">

</div>

<!-- 修改密码窗口 -->
<div id="passwordDialog" style="padding: 20px">
    <form id="editPassword">
        <table cellpadding="8" >
            <tr>
                <td>原密码:</td>
                <td>
                    <input id="old_password" name="password" style ="width: 200px; height: 30px;" class="easyui-textbox" type="password"  data-options="required:true, missingMessage:'请输入原密码'" />
                </td>
            </tr>
            <tr>
                <td>新密码:</td>
                <td>
                    <input id="new_password" style="width: 200px; height: 30px;" class="easyui-textbox" type="password" validType="password" name="newpassword" data-options="required:true, missingMessage:'请输入新密码'" />
                </td>
            </tr>
            <tr>
                <td>新密码:</td>
                <td><input id="re_password" style="width: 200px; height: 30px;" class="easyui-textbox" type="password" validType="equals['#new_password']"  data-options="required:true, missingMessage:'再次输入密码'" /></td>
            </tr>
        </table>
    </form>
</div>

</body>
</html>